<template>
  <div class="global-top" :class="isShowNav ? 'global-top-hide' : ''">
    <div class="global-nav">
      <a href="/">
        <img
          src="//sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg"
          alt=""
        />
      </a>
      <div class="global-nav-right">
        <ul>
          <li>
            <ul>
              <li>
                <a href="/">首页</a>
              </li>
              <li>
                <a href="/">沸点</a>
              </li>

              <li>
                <a href="/">小册</a>
              </li>
              <li>
                <a href="/">活动</a>
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li>
                <el-input
                  suffix-icon="el-icon-search"
                  v-model="input"
                  @clear="handleClear"
                  placeholder="请输入内容"
                  :clearable="true"
                  @change="handleChange"
                  max="100"
                ></el-input>
              </li>
              <li>
                <el-dropdown
                  size="medium"
                  split-button
                  type="primary"
                  @command="handleClick"
                >
                  更多菜单
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">写文章</el-dropdown-item>
                    <el-dropdown-item command="b">狮子头</el-dropdown-item>
                    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <!-- <a href="" class="iconfont icon-caret-down"></a> -->
              </li>
              <li class="loginBtn" v-if="!isLogin" @click="toLoginPage">
                登录
              </li>

              <li v-else class="avator">
                <a class="iconfont el-icon-bell notice"></a>
                <el-popover placement="bottom" width="200" trigger="click">
                  <div>
                    <input id="choice_p" size="small" type="file" />
                  </div>
                  <div class="changepassword" @click="handleChangePWD">
                    修改密码
                  </div>
                  <div class="output" @click="outLogin">退出登录</div>
                  <!-- <el-avatar
                    :size="40"
                    slot="reference"
                    :src="selfUserInfo.url"
                  ></el-avatar> -->
                </el-popover>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"

export default {
  name: "Nav",
  props: {
    isLogin: {
      type: Boolean,
      default: false,
    },
    selfUserInfo: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ...mapState(["isShowNav"]),
  },

  data() {
    return {
      input: "",
      visible: false,
      photoObj: "",
      photo: "",
      fileList: [],
    }
  },
  mounted() {
    console.log(`obthis.isLoginject`, this.isLogin)
    if (this.isLogin) {
      this.uploadHeadImage()
    }
  },
  methods: {
    toLoginPage() {
      this.$router.push("login")
    },
    outLogin() {
      localStorage.clear()
      this.$router.push("login")
    },
    handleChangePWD() {},
    uploadHeadImage(e) {
      let that = this
      document
        .getElementById("choice_p")
        .addEventListener("change", function (e) {
          var files = this.files
          var reader = new FileReader()
          reader.readAsDataURL(files[0])
          reader.onload = async function (e) {
            let obj = {
              base64: this.result,
              userId: selfUserInfo.userId,
            }
            let { data } = await that.$http.post("/userImg", obj)
            if (data.status === "SUCCESS") {
              that.$message.success(data.msg)
            } else {
              that.$message.error(data.msg)
            }
          }
        })
    },
    handleClick(command) {
      console.log(`e`, command)
      if (command === "a") {
        this.toWrite()
      } else {
        this.$message.error("你触发了item")
      }
    },
    toWrite() {
      this.$router.push("publicArtic")
    },
    handleClear() {
      console.log(`123`, 123)
    },
    handleChange() {},
    handleRemove(file) {
      console.log(file)
    },
  },
}
</script>

<style lang="less">
@import "../assets/css/nav.less";
li {
  cursor: pointer;
  list-style: none;
}
</style>
